<script setup>
import MapContainer from "@/components/MapContainer.vue";
import AdminView from "./components/AdminView.vue";
import CommentView from "./components/CommentView.vue";
import UserView from "./components/UserView.vue";
import ClothView from "./components/ClothView.vue";
import WorkView from "./components/WorkView.vue";

</script>
<template>
  <el-tabs tab-position="left" class="demo-tabs">
    <el-tab-pane label="首页">
      <MapContainer></MapContainer>
    </el-tab-pane>

    <el-tab-pane label="作品管理">
      <WorkView></WorkView>
    </el-tab-pane>

    <el-tab-pane label="用户管理">
      <UserView></UserView>
    </el-tab-pane>

    <el-tab-pane label="评论管理">
      <CommentView></CommentView>
    </el-tab-pane>

    <el-tab-pane label="服饰管理">
      <ClothView></ClothView>
    </el-tab-pane>

    <el-tab-pane label="管理员管理">
      <AdminView></AdminView>
    </el-tab-pane>
  
    <!-- <el-tab-pane label="数据分析">
      <DataView style="width: 1800px; height: 800px"></DataView>
    </el-tab-pane> -->
  </el-tabs>
</template>
<style>
.el-tab-pane {
  height: 100%;
  width: 100%;
}

.demo-tabs {
  width: 100%;
  height: 100%;
  color: aliceblue;
}

.custom-tabs-label {
  color: aliceblue;
}

/* 覆盖激活状态的颜色 */
:root {
  --el-color-primary: #409eff;
}

/* 覆盖未激活状态的颜色 */
.el-tabs__item {
  font-size: 25px;
  margin: 20px;
  &.is-active {
    color: var(--el-color-primary);
    background: #ecf5ff;
    border-radius: 10px;
  }
  &:not(.is-active) {
    /* 你的未激活颜色 */
    color: #b6abab;
  }
}

.pageIndex {
  width: 100%;
  height: 100%;
}

.search {
  margin-top: 0.5%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr; /* 三列，每列占据可用空间 */
}

.item1 {
  width: 100%;
  grid-column: 1 / 4; /* 从第一列线开始到第三列线结束 */
  grid-row: 1; /* 第一行 */
}

.item2 {
  grid-column: 1 / 4; /* 第三列 */
  grid-row: 2; /* 从第一行线开始到第三行线结束 */
}

.searchInput {
  width: 15%;
}

.search-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 定义4列，每列占据相同的空间 */
  grid-template-rows: auto auto; /* 定义2行，高度由内容决定 */
  gap: 30px; /* 网格项之间的间隔 */
  margin-bottom: 0.5%;
}

.search-item {
  border: 1px solid #ccc; /* 为了更好的视觉效果，给网格项添加边框 */
}

.searchBtn {
  width: 30%;
  height: 100%;
}
</style>
